<template>
    <div class="contain-edit">
           <div class="header">
           <el-button class="link" type="primary">
                <router-link to="/" style="color: #fff;">返回</router-link>
           </el-button>
       </div>
       <div class="main">
           <div class="list">
                <div class="title">用户详情</div>
                 <div class="item">
                    <div class="item-key">等级:</div>
                    <div class="item-value">{{ info.level }}</div>
                </div>
                 <div class="item">
                    <div class="item-key">段位:</div>
                    <div class="item-value">{{ info.danName }}</div>
                </div>
                <div class="item">
                    <div class="item-key">金币:</div>
                    <div class="item-value">{{ money.gold }}</div>
                </div>
                <div class="item">
                    <div class="item-key">钻石数:</div>
                    <div class="item-value">{{ money.diamond }}</div>
                </div>
                <div class="item">
                    <div class="item-key">绑定手机:</div>
                    <div class="item-value">{{ info.mobile}}</div>
                </div>
                <div class="item">
                    <div class="item-key">常用地址:</div>
                    <div class="item-value">{{ address }}</div>
                </div>
               
                <div class="item" style="height:160px;">
                    <div class="item-left" style="height:160px;">背包物品:</div>
                    <div class="item-value">
                        <span style="width:100px; height:40px; display:inline-block; margin-right: 10px;" v-for="item in info.items" :key="item">
                            {{item.name}}X{{item.count}}
                        </span>
                    </div>
                </div>
                <div class="item" style="width:auto;height:313px;">
                    <div class="item-left" style="height:313px;">对战信息:</div>
                    <div style="margin-left: 151px;">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column prop="id" label="对战编号"></el-table-column>
                            <el-table-column prop="starttime" label="对战时间"></el-table-column>
                            <el-table-column prop="address" label="对战玩家">
                                <template slot-scope="scope">
                                    <span v-for="value in scope.row.players" :key="value" style="margin-left:20px;">{{value.nickname}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="winner" label="胜方"></el-table-column>
                            <el-table-column prop="address" label="操作">
                                <template slot-scope="scope">
                                    <el-button type="text" size="mini" @click="linkToEdit()">查看详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="item item-pic" style="height: 550px;">
                    <div class="item-key" style="height: 550px;">能力分析:</div>
                    <div class="analyse" >
                        <div class="pic" >
                            <span class="pic-font">能力雷达图</span>
                            <div id='chart' style=""></div>
                            <div class="avatar-info">
                                <div class="avatar">
                                    <!-- <img :src="evaluation.img" alt="" class="avatar-img"> -->
                                    <img src="../../images/avatar2.jpg" alt="" class="avatar-img">
                                </div>
                                <div class="info">
                                    <span>{{evaluation.desc}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="wins">
                            <span class="pic-font"> 比赛胜率</span>
                            <ul class="match">
                                <li class="match-item">
                                    <div style="display: inline-block">
                                        <span style="display: block; line-height: 25px;">成长赛</span>
                                        <span style="font-size: 14px;">{{matchGame.totalcount}}场</span>
                                    </div>
                                    <div style="display: inline-block; margin-left:10px;">
                                        <span>
                                            <progress :value="matchGame.wincount" :max="matchGame.totalcount" style="line-height: 50px;"></progress>
                                        </span>
                                        <div style="font-size: 14px;">胜{{matchGame.wincount/matchGame.totalcount*100}}%，{{matchGame.totalcount}}场</div>
                                    </div>
                                </li>
                                <li class="match-item">
                                    <div style="display: inline-block">
                                        <span style="display: block; line-height: 25px;">好友赛</span>
                                        <span style="font-size: 14px;">{{friendGame.totalcount}}场</span>
                                    </div>
                                    <div style="display: inline-block; margin-left:10px;">
                                        <span>
                                            <progress value="22" max="100" style="line-height: 50px;"></progress>
                                        </span>
                                        <div style="font-size: 14px;">胜{{friendGame.wincount/friendGame.totalcount*100}}%，{{friendGame.totalcount}}场</div>
                                    </div>
                                </li>
                                <li class="match-item">
                                    <div style="display: inline-block">
                                        <span style="display: block; line-height: 25px;">锦标赛</span>
                                        <span style="font-size: 14px;">0场</span>
                                    </div>
                                    <div style="display: inline-block; margin-left:10px;">
                                        <span>
                                            <progress value="0" max="100" style="line-height: 50px;"></progress>
                                        </span>
                                        <div style="font-size: 14px;">胜0%，0场</div>
                                    </div>
                                </li>
                            </ul>
                            <span class="pic-font"> 个人荣誉</span>
                            <div>
                                <ul class="match">
                                    <li class="honor"><img class="honor-img" src="../../images/trophy.png" alt=""><span class="honor-span"></span><span class="honor-text">十六强次数</span></li>
                                    <li class="honor"><img class="honor-img" src="../../images/trophy.png" alt=""><span class="honor-span"></span><span class="honor-text">十六强次数</span></li>
                                    <li class="honor"><img class="honor-img" src="../../images/trophy.png" alt=""><span class="honor-span"></span><span class="honor-text">十六强次数</span></li>
                                    <li class="honor"><img class="honor-img" src="../../images/trophy.png" alt=""><span class="honor-span"></span><span class="honor-text">十六强次数</span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
           </div>
       </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
let echarts = require('echarts');
export default {
    data() {
        return {
           id:'',
           info:'',
           money:{},
           address:'',
           tableData:[],
           evaluation:{}, // 头像部分
           gameDistrib:[], // 比赛胜率
           friendGame:{},  // 好友赛
           matchGame:{},  //成长赛
           answerDistrib:[], // 雷达图数据
           indicator:[], // 雷达图名称数组
        }
    },
    mounted() {
        this.id  = this.$router.currentRoute.query.id;
        this.getDetail(); 
    },
    methods: {
        getDetail(){
           let url = CONSTANT.URL.USER.FINDDETAIL;
           let param = {
               userId:this.id
           } ;
           common.requestAjax(url,param,null,(res)=>{
                let data = res.data.bussData;
                this.info = data;
                this.money = data.money;
                this.address = data.address[0].address;
                this.tableData = data.recentGames;
                // 头像部分
                this.evaluation = data.evaluation;
                // 比赛胜率
                this.gameDistrib = data.gameDistrib;
                for(let i = 0; i<this.gameDistrib.length;i++){
                    if(this.gameDistrib[i].category == 'FRIEND'){
                        // 好友赛
                        this.friendGame = this.gameDistrib[i];
                    }
                    if(this.gameDistrib[i].category == 'MATCH'){
                        // 成长赛
                        this.matchGame = this.gameDistrib[i];
                    }
                }
                //雷达图数据
                // this.answerDistrib
                let answerDistrib = data.answerDistrib;
                console.log('雷达图数据',answerDistrib);
                let option_value = [];
                for(let i = 0;i < answerDistrib.length;i++){
                    let obj = {};
                    obj.categoryName = answerDistrib[i].categoryName;
                    obj.max = answerDistrib[i].totalCount;
                    this.indicator.push(obj);
                    option_value.push(answerDistrib.winCount);
                }
                console.log('雷达图数组',this.indicator);
                console.log('获取详情',data);

                // let option_value = [10,20,30,40,50,60];
                let option = this.getChart(option_value);
                let myChart = echarts.init(document.getElementById('chart')); // 绘制图表
                myChart.setOption(option);
           }) 
        },  
        getChart(option_value){
            let option = {
                tooltip: {},
                radar: {
                    shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                    }
                    },
                    // indicator: [
                    // { name: '文艺', max: 100},
                    // { name: '文科', max: 100},
                    // { name: '理科', max: 100},
                    // { name: '生活', max: 100},
                    // { name: '娱乐', max: 100},
                    // { name: '流行', max: 100}
                    // ]
                    indicator: this.indicator
                },
                series: [{
                    name: '预算 vs 开销（Budget vs spending）',
                    type: 'radar',
                    data :[
                        { value:option_value}
                    ]
                }]
            };
           
            return option;
        }
    },
    filters:{
        formatStatus(value){
            var status = [];
            status['TO_CHECK'] = '待检查';
            status['DISTRIBUTION'] = '已分派';
            status['UNDISTRIBUTED'] = '未分派';
            if(value){
                return status[value];
            }
            else{ return '--'};
        },   
        formatSpeed(value){
            if(value == 0){
                return '正常';
            }
            else if(value == 1){
                return '异常';
            }
            else{ return '--'};
        },  
        formatType(value){
            var status = [];
            status['CAMERA'] = '摄像机';
            status['OPTICAL'] = '光端机';
            status['SMARTBOX'] = '智能箱';
            if(value){
                return status[value];
            }
            else{ return '--'};
        },   
    }
}
</script>
<style lang="scss">
    .item-left {
        float: left;
        width: 120px;
        padding-left: 20px;
        padding-right: 10px;
        // height: 40px;
        line-height: 40px;
        text-align: right;
        border-right: 1px solid #dedede;
    }
    .item-right {
        // height: 40px;
        // line-height: 40px;
        padding-left: 20px;
        float: left;
    }
    .backage {
        height: auto;
        border: 1px solid #dedede;
        border-top: none;
    }
    .analyse{
        margin-left: 151px;
        height:530px; 
        padding-top: 20px; 
        display: flex;
    }
    .pic{
        width:330px; 
        height:530px;
        // background-color:yellowgreen;
        display: inline-block;
        margin-right: 30px;
        padding-left: 20px;
        .avatar-info{
            .avatar{
                width:100px;
                height:100px;
                background-color:#626262;
                margin-top:50px;
                border-radius:50%;
                float:left;
                .avatar-img{
                    width: 100%;
                    height: 100%;
                }
            }
            .info{
                // float:left;
                // margin-top:50px;
                margin-left:10px;
                padding: 60px 20px;
            }
        }
    }
    .pic-font{
            border-left: 5px solid #999;
            width: 100px;
            height: 40px;
            line-height: 40px;
            // background-color: pink;
            // margin-left: 15px;
            margin-bottom: 15px;
            display: block;
        }
    .wins{
        display: inline-block;
        height: 350px;
        flex: 1;
    }
    .match{
        list-style:none; 
        padding-left:20px; 
        margin-top:20px;
        .match-item{
            width: 300px; 
            height:50px; 
            background-color: #eee; 
            margin-bottom:30px;
        }
    }
    #chart{
        width:300px;
        height:300px;
    }
    .honor {
        float: left;
        width: 150px;
        height: 150px;
        margin-right: 20px;
        // background-color: yellow;
        .honor-img{
            width: 70px;
            height: 70px;
            padding: 30px 40px 0px 40px;
        }
        .honor-span{
            width: 40px;
            height: 20px;
            border: 1px solid #ccc;
            display: block;
            margin-left: 55px;
        }
        .honor-text{
            display: block;
            text-align: center;
            font-size: 14px;
        }
    }
   
</style>

    
